<template>
  <div id="chengji">
    <md-scroll-view class="scroller" ref="scrollView" :scrolling-x="false" @refreshing="onRefresh" :bouncing="true" :auto-reflow="true">
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <div class="swiper-container">
        <swiper :options="swiperOption">
          <swiper-slide :key="$index" v-for="(item, $index) in banners">
            <a
              :href="item.url==''?undefined:item.url"
              target="_blank"
              class="banner-item"
              :style="{'background': 'url('+item.adv_banner+')','background-repeat':'no-repeat','background-size':'cover'}"
            >{{item.text}}</a>
          </swiper-slide>
          <!-- <swiper-slide data-emmaBanner="e4d1c80fd2"></swiper-slide> -->
        </swiper>
      </div>
      <div class="city-selector">
        <div class="city-box">
          <div class="common-box left-box" @click="selectStartCity">
            <div>
              <div class="city-name">{{getStartCityObj ? getStartCityObj.type=='1' ? getStartCityObj.start_route : getStartCityObj.stationName : '请选择'}}</div>
              <div class="hint">出发地</div>
            </div>
          </div>
          <div class="exchange-box" @click="exchangeCity">
            <md-icon class="exchange-button" name="cjyc_wf_icon" size="lg"></md-icon>
          </div>
          <div class="common-box right-box" @click="selectDestCity">
            <div>
              <div class="city-name">{{getEndCityObj?getEndCityObj.type=='1'?getEndCityObj.end_route:getEndCityObj.stationName:"请选择"}}</div>
              <div class="hint">目的地</div>
            </div>
          </div>
        </div>
        <md-button class="yueche-btn" @click="onSubmitClick">我要约车</md-button>
      </div>
      <div class="common-routes">
        <div class="changyongxianlu">常用线路</div>
        <ul v-if="getRecommandRouteList&&getRecommandRouteList.length>0">
          <li :key="$index" v-for="(item, $index) in getRecommandRouteList" @click="onRecommandRouteClick(item)">{{item.start_route}}-{{item.end_route}}</li>
        </ul>
        <div class="no-common-route" v-if="getRecommandRouteList&&getRecommandRouteList.length<=0">
          <img class="img" :src="require('@/assets/imgs/home_cyxl_icon.png')" />
          <div class="tip">暂没有常用线路哦～</div>
        </div>
      </div>
    </md-scroll-view>
  </div>
</template>

<script>
import '@/assets/svgs/cjyc_wf_icon.svg';
import { mapGetters } from 'vuex';
import { GET_BANNERS, GET_POP_ADS, GET_RECOMMAND_ROUTES, GET_CURRENT_LOCATION, GET_ROUTE_INFO } from '@/store/actions.types';
import { SET_START_CITY_OBJ, EXCHANGE_START_END, CONFIRM_ROUTE } from '@/store/mutations.types';
import {
  Icon,
  Button,
  Dialog,
  Popup,
  PopupTitleBar,
  Field,
  Toast,
  FieldItem,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore
} from 'mand-mobile';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import Utils from '@/common/pakjUtils';
import ScrolledNoticebar from '@/components/ScrolledNoticebar';
export default {
  name: 'chengji',
  data() {
    return {
      startCity: '',
      destCity: '',
      notice: '',
      user_headpath: localStorage.getItem('user_headpath') || require('@/assets/imgs/dt_cktx_big.png'),
      nick_name: localStorage.getItem('nick_name'),
      is_identity: localStorage.getItem('is_identity'),
      showPopupAdv: false,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      }
    };
  },
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrolledNoticebar.name]: ScrolledNoticebar,
    [Toast.name]: Toast,
    swiper,
    swiperSlide
  },
  created() {
    this.$store.dispatch(GET_BANNERS); // 主动调用获取BANNER广告接口
    if (this.gpsStatus === '2') {
      this.$store.dispatch(GET_RECOMMAND_ROUTES, {
        city: this.getCurrentLocation.provinceName
      });
      this.$store.dispatch('getHasTaxi', this.getCurrentLocation.provinceName);
    } else {
      this.$store.dispatch(GET_RECOMMAND_ROUTES);
    }
  },
  methods: {
    onRefresh() {
      this.$store.dispatch(GET_RECOMMAND_ROUTES).then(() => {
        this.$store.dispatch(GET_BANNERS).then(() => {
          this.$store.dispatch('getUnreadMessageInfo').then(() => {
            this.$refs.scrollView.finishRefresh();
          });
        });
      });
    },
    onRecommandRouteClick(item) {
      this.$store.commit(CONFIRM_ROUTE, item);
      this.$router.push({
        name: 'Pinche'
      });
    },
    onSubmitClick() {
      if (this.getEndCityObj) {
        let routeId;
        if (this.getEndCityObj.type) {
          if (this.getEndCityObj.type === '1') {
            routeId = this.getEndCityObj.route_id;
          } else {
            routeId = this.getEndCityObj.routeId;
          }
        } else {
          routeId = this.getEndCityObj.route_id;
        }
        this.$store.dispatch(GET_ROUTE_INFO, routeId).then(result => {
          if (typeof result === 'object') {
            let msg = result.msg.replace(/\\n/g, '<br/>');
            Dialog.confirm({
              title: '温馨提示',
              content: msg,
              confirmText: '立即加入',
              onConfirm: () => {
                window.location.href = result.url;
              }
            });
          } else {
            this.$store.commit(CONFIRM_ROUTE, this.getEndCityObj);
            if (this.getStartCityObj.type === '2' || this.getEndCityObj.type === '2') {
              this.$router.push({
                name: 'Baoche'
              });
            } else {
              this.$router.push({
                name: 'Pinche'
              });
            }
            this.$store.commit('resetCityStore');
            let city = {
              start_route: this.getCurrentLocation.provinceName,
              type: '1'
            };
            this.$store.commit(SET_START_CITY_OBJ, city);
          }
        });
      } else {
        Toast({
          content: '请选择起点城市或者终点城市',
          duration: 3000,
          hasMask: true
        });
      }
    },
    selectStartCity() {
      this.$router.push({
        name: 'SelectCity',
        params: {
          isStart: true
        }
      });
    },
    selectDestCity() {
      if (this.getStartCityObj) {
        this.$router.push({
          name: 'SelectCity',
          params: {
            isStart: false
          }
        });
      } else {
        Toast({
          content: '请选择起点城市',
          duration: 3000,
          hasMask: true
        });
      }
    },
    exchangeCity() {
      if (this.getStartCityObj && this.getEndCityObj) {
        this.$store.commit(EXCHANGE_START_END);
        if (this.getStartCityObj.type === '2' || this.getEndCityObj.type === '2') {
          this.$store.commit('exchangeBaoStartEndInfo');
        }
      } else {
        Toast({
          content: '请选择起点城市以及目的地城市',
          duration: 3000,
          hasMask: true
        });
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentUser',
      'banners',
      'getRecommandRouteList',
      'getCurrentLocation',
      'getStartCityObj',
      'getEndCityObj',
      'gpsStatus'
    ])
  }
};
</script>

<style lang="stylus">
#chengji {
  background-color: color-primary-background;
  height: calc(100vh - 188px);

  .md-scroll-view {
    background-color: transparent;
    height: calc(100vh - 80px);
  }

  .swiper-container {
    width: 100vw;
    height: 450px;
    background-color: color-primary-background;

    .banner-item {
      float: left;
      width: 100%;
      height: 100%;
      line-height: 250px;
      text-align: center;
      font-size: 28px;
      color: #FFF;
      box-align: center;
      align-items: center;
      box-pack: center;
      justify-content: center;
      text-decoration-line: none;
    }
  }

  .city-selector {
    background-color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -78px;
    position: relative;
    width: 710px;
    height: 340px;
    z-index: 2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .exchange-button {
      width: 56px;
      height: 56px;
    }

    .city-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 620px;
      margin: 0px 30px;
      flex: 1;

      .common-box {
        width: 300px;
        display: flex;

        .city-name {
          max-width: 6em;
          min-width: 3em;
          font-size: 40px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .hint {
          font-size: 24px;
          color: color-text-caption;
          margin-top: 6px;
          text-align: center;
        }
      }

      .left-box {
        justify-content: flex-start;
      }

      .right-box {
        justify-content: flex-end;
      }
    }

    .yueche-btn {
      width: 650px;
      height: 98px;
      margin-bottom: 50px;
    }
  }

  .common-routes {
    background-color: #fff;
    margin: 20px;
    border-radius: 10px;
    padding: 30px;
    color: color-text-minor;

    .changyongxianlu {
      font-size: 28px;
    }

    ul {
      margin-top: 16px;
      display: flex;
      flex-flow: row wrap;

      li {
        font-size: 24px;
        text-align: center;
        background-color: #F4F4F4;
        margin: 5px;
        padding: 10px 14px;
        border-radius: 4px;
      }
    }

    .no-common-route {
      margin-top: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-bottom: 40px;

      img {
        width: 138px;
        height: 131px;
      }

      .tip {
        margin-top: 10px;
        color: color-text-minor;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
      }
    }
  }
}
</style>
